<template>
	<el-form ref="formModel" :model="value" :rules="rules" :label-width="labelWidth" :inline="inline" v-bind="$props"
		v-on="$listeners">
		<h4 class="orange">{{comLan["baseInfo"]}}</h4>
		<el-row>
			<!-- <slot name="ParentIDBefore"></slot>
            <slot name="ParentID">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="ParentID" :label="keyLan['ParentID']+':'">
                        <el-input-number type="number" pattern="\d*" v-model.number="value.ParentID"></el-input-number>
                    </el-form-item>
                </el-col>
            </slot>
            <slot name="ParentIDAfter"></slot> -->
			<slot name="EnumSysStoreTypeBefore"></slot>
			<slot name="EnumSysStoreType">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"
					v-if="user.isAdminStore||(!isAdd&&value.EnumSysStoreType==0)||user.isMainStore==false">
					<el-form-item prop="EnumSysStoreType" :label="keyLan['EnumSysStoreType']+':'">
						<span v-html="getLabel(value.EnumSysStoreType,EnumSysStoreType)"></span>
					</el-form-item>
				</el-col>

				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-else>
					<el-form-item prop="EnumSysStoreType" :label="keyLan['EnumSysStoreType']+':'">
						<el-radio-group v-model="value.EnumSysStoreType">
							<el-radio v-for="item in EnumSysStoreType" :key="item.Value" :value="item.Value"
								:label="item.Value">
								{{enumLanTxt(item.Label)}}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</slot>
			<slot name="EnumSysStoreTypeAfter"></slot>
			<slot name="SysStoreNameBefore"></slot>
			<slot name="SysStoreName">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-form-item prop="SysStoreName" :label="keyLan['SysStoreName']+':'">
						<!--不靠店铺名称登录,所以都可以改名称-->
						<!--:disabled="value.EnumSysStoreType==0&&!user.isAdminStore"-->
						<el-input v-model="value.SysStoreName">
						</el-input>
					</el-form-item>
				</el-col>
			</slot>
			<slot name="SysStoreNameAfter"></slot>
			<slot name="DirectorBefore"></slot>
			<slot name="Director">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-form-item prop="Director" :label="keyLan['Director']+':'">
						<el-input v-model="value.Director"></el-input>
					</el-form-item>
				</el-col>
			</slot>
			<slot name="DirectorAfter"></slot>
			<slot name="PhoneNumberBefore"></slot>
			<slot name="PhoneNumber">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-form-item prop="PhoneNumber" :label="keyLan['PhoneNumber']+':'">
						<el-input v-model="value.PhoneNumber"></el-input>
					</el-form-item>
				</el-col>
			</slot>
			<slot name="PhoneNumberAfter"></slot>

			<slot name="EnumStatusBefore"></slot>
			<slot name="EnumStatus">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-form-item prop="EnumStatus" :label="keyLan['EnumStatus']+':'">
						<el-radio-group v-model="value.EnumStatus"
							:disabled="(value.EnumSysStoreType==0&&!user.isAdminStore)||(!isAdd&&user.sysStoreID==value.SysStoreID)">
							<el-radio v-for="item in EnumStatus" :key="item.Value" :value="item.Value"
								:label="item.Value">
								{{enumLanTxt(item.Label)}}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</slot>
			<slot name="EnumStatusAfter"></slot>

			<slot name="MaxStoreCountBefore"></slot>
			<slot name="MaxStoreCount">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-if="user.isAdminStore">
					<el-form-item prop="MaxStoreCount" :label="keyLan['MaxStoreCount']+':'">
						<el-input-number type="number" pattern="[\d,]+\.?[\d]*" v-model.number="value.MaxStoreCount">
						</el-input-number>
					</el-form-item>
				</el-col>
			</slot>
			<slot name="MaxStoreCountAfter"></slot>

			<!-- <slot name="ProvinceBefore"></slot>
            <slot name="Province">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="Province" :label="keyLan['Province']+':'">
                        <el-input v-model="value.Province"></el-input>
                    </el-form-item>
                </el-col>
            </slot>
            <slot name="ProvinceAfter"></slot>
            <slot name="CityBefore"></slot>
            <slot name="City">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="City" :label="keyLan['City']+':'">
                        <el-input v-model="value.City"></el-input>
                    </el-form-item>
                </el-col>
            </slot>
            <slot name="CityAfter"></slot>
            <slot name="DistrictBefore"></slot>
            <slot name="District">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="District" :label="keyLan['District']+':'">
                        <el-input v-model="value.District"></el-input>
                    </el-form-item>
                </el-col>
            </slot>
            <slot name="DistrictAfter"></slot>
            <slot name="AddressBefore"></slot>
            <slot name="Address">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="Address" :label="keyLan['Address']+':'">
                        <el-input v-model="value.Address"></el-input>
                    </el-form-item>
                </el-col>
            </slot>
            <slot name="AddressAfter"></slot>
            <slot name="LongitudeBefore"></slot>
            <slot name="Longitude">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="Longitude" :label="keyLan['Longitude']+':'">
                        <el-input-number type="number" pattern="[\d,]+\.?[\d]*" v-model.number="value.Longitude">
                        </el-input-number>
                    </el-form-item>
                </el-col>
            </slot>
            <slot name="LongitudeAfter"></slot>
            <slot name="LatitudeBefore"></slot>
            <slot name="Latitude">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                    <el-form-item prop="Latitude" :label="keyLan['Latitude']+':'">
                        <el-input-number type="number" pattern="[\d,]+\.?[\d]*" v-model.number="value.Latitude">
                        </el-input-number>
                    </el-form-item>
                </el-col>
            </slot>
            <slot name="LatitudeAfter"></slot> -->

			<slot name="RemarkBefore"></slot>
			<slot name="Remark">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item prop="Remark" :label="keyLan['Remark']+':'">
						<el-input type="textarea" :rows="2" v-model="value.Remark" style="width: 100%;"></el-input>
					</el-form-item>
				</el-col>
			</slot>
			<slot name="RemarkAfter"></slot>
		</el-row>

		<h4 class="orange">{{comLan["other"]}}</h4>
		<el-row>
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<el-form-item prop="Province" :label="keyLan['Province']+'/'+keyLan['City']+'/'+keyLan['District']+':'">
					<el-cascader ref="myCity" size="large" :options="regionData" v-model="selectedOptions"
						@change="handleChange" style="width:100%;">
					</el-cascader>
				</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
				<el-form-item :label="keyLan['Address']+':'" prop="Address">
					<div class="el-input" style="width:100%">
						<input autocomplete="off" type="text" rows="2" validateevent="true" class="el-input__inner"
							id="suggestId" v-model="value.Address" @keyup.enter="searchByAddress" />
					</div>
				</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" style="text-align: center;">
				<el-button @click="searchByAddress" icon="search">根据地址查询</el-button>
			</el-col>
			<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
				<el-form-item :label="keyLan['Longitude']+':'" prop="Longitude">
					<el-input v-model="value.Longitude" @keyup.native.enter="searchByL"></el-input>
				</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
				<el-form-item :label="keyLan['Latitude']+':'" prop="Latitude">
					<el-input v-model="value.Latitude" @keyup.native.enter="searchByL"></el-input>
				</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" style="text-align: center;">
				<el-button @click="searchByL" icon="search">根据经纬度查询</el-button>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<!-- <div id="containerBusinessAdd"
                        style="margin: 5px; width: 98%; height: 450px; border: 1px solid gray;"></div> -->
				<baidu-map :scroll-wheel-zoom="true" :inertial-dragging="true" :continuous-zoom="true"
					@click="clickBaidumap" :zoom="zoom" :center="centerPoint" @moving="zoomend" @moveend="zoomend"
					@zoomend="zoomend" @ready="baiduMapReady">
					<!--地图视图-->
					<bm-view style="width:100%;height:100%;min-height:450px"></bm-view>
					<!--点标注-->
					<bm-marker :position="markPoint" :dragging="true" :zIndex="100" @dragend="clickBaidumap"
						@rightclick="infoWindowOpen" @click="infoWindowOpen">
						<!-- animation="BMAP_ANIMATION_BOUNCE" -->
						<!-- :icon="{ url: markerIcon, size: { width: 34, height: 34 } }" -->
						<bm-info-window :show="isShowInfo" @close="infoWindowClose" @open="infoWindowOpen">
							省市区:{{pcd.p + "/" + pcd.c + "/" + pcd.d}}
							<br />
							地址:{{address}}
							<br />
							<el-button type="text" @click="useThisAddress">使用此地址</el-button>
							<el-button type="text" @click="zoomDefault" style="padding-left: 10px;">默认缩放</el-button>
						</bm-info-window>
					</bm-marker>
					<!--比例尺-->
					<bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
					<!--缩放-->
					<bm-navigation :showZoomInfo="true" :enableGeolocation="false" anchor="BMAP_ANCHOR_TOP_RIGHT">
					</bm-navigation>
					<!--地图类型 只能这两个,另外两个要JS报错-->
					<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"
						type="BMAP_MAPTYPE_CONTROL_HORIZONTAL">
					</bm-map-type>
					<!--缩略图-->
					<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_LEFT" :isOpen="true"></bm-overview-map>
					<!--定位 有BUG,点了之后JS就一直报错-->
					<!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="false"
                            @locationSuccess="clickBaidumap" :offset="{width: 0,height: 0}">
                        </bm-geolocation> -->
					<!--全景 有BUG无法运行-->
					<!-- <bm-panorama :offset="{width: 80,height: 0}"></bm-panorama> -->
				</baidu-map>
			</el-col>
		</el-row>
		<br />
	</el-form>
</template>

<script>
	import common from "@/common/common.js";
	import js from "@/System/Partial/SysStore/js.js";

	import {
		regionData
	} from 'element-china-area-data'

	export default {
		name: "SysStoreAddEdit",
		mixins: [common.baseVM, js],
		data() {
			return {
				regionData: regionData,
				selectedOptions: [],

				markerIcon: null, //标注图片
				isShowInfo: false,
				address: '',
				zoom: 13,
				markPoint: {
					lng: 0,
					lat: 0
				},
				centerPoint: { //故意分离的,不然居中有BUG
					lng: 0,
					lat: 0
				},
				pcd: {
					p: '',
					c: '',
					d: ''
				},

				mapReady: false,
				mapReadyCallback: null
			}
		},
		watch: {
			// value: {
			//     deep: true, //深度
			//     handler(n, o) {
			//     }
			// }
		},
		methods: {
			handleChange() {
				var city = this.regionData;
				for (var i = 0; i < city.length; i++) {
					if (city[i].value == this.selectedOptions[0]) {
						this.value.Province = city[i].label
						for (var j = 0; j < city[i].children.length; j++) {
							if (city[i].children[j].value == this.selectedOptions[1]) {
								this.value.City = city[i].children[j].label
								for (var m = 0; m < city[i].children[j].children.length; m++) {
									if (
										city[i].children[j].children[m].value ==
										this.selectedOptions[2]
									) {
										this.value.District = city[i].children[j].children[m].label
									}
								}
							}
						}
					}
				}
				//console.log(this.value.Province, this.value.City, this.value.District)
			},
			setPcd() {
				var p = this.value.Province;
				var c = this.value.City;
				var d = this.value.District;
				var r = [];
				var city = this.regionData;
				for (var i = 0; i < city.length; i++) {
					if (city[i].label == p) {
						r.push(city[i].value);
						for (var j = 0; j < city[i].children.length; j++) {
							if (city[i].children[j].label == c) {
								r.push(city[i].children[j].value)
								for (var m = 0; m < city[i].children[j].children.length; m++) {
									if (city[i].children[j].children[m].label == d) {
										r.push(city[i].children[j].children[m].value);
									}
								}
							}
						}
					}
				}
				this.selectedOptions = r;
			},

			setReadyCallbak(callback) {
				//console.log("setReadyCallbak", this.mapReady, callback);
				if (!callback || typeof(callback) != 'function') return;
				if (this.mapReady) {
					callback();
					return;
				}
				this.mapReadyCallback = callback;
			},
			baiduMapReady({
				BMap,
				map
			}) {
				//console.log("baiduMapReady");
				this.mapReady = true;
				if (!!this.mapReadyCallback && typeof(this.mapReadyCallback) == 'function') {
					this.mapReadyCallback();
					//console.log("baiduMapReady", this.mapReadyCallback);
				}
			},
			infoWindowClose() {
				this.isShowInfo = false
			},
			infoWindowOpen() {
				this.isShowInfo = true
			},
			areaIsNull() {
				var r = this.selectedOptions == null ||
					this.selectedOptions.length == 0 ||
					(this.selectedOptions.length == 3 &&
						(this.selectedOptions[0] == null || this.selectedOptions[0] == '') &&
						(this.selectedOptions[1] == null || this.selectedOptions[1] == '') &&
						(this.selectedOptions[2] == null || this.selectedOptions[2] == ''));
				return r;
			},
			initMapInfo(first) {
				var point = new BMap.Point(this.value.Longitude, this.value.Latitude);
				this.markPoint = point;
				//这里解决居中BUG,也解决了点击经纬度查询没居中的问题
				this.centerPoint = new BMap.Point(this.value.Longitude, this.value.Latitude);
				let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
				geocoder.getLocation(point, (rs) => {
					if (!!rs && !!rs.address && !this.value.Address) {
						this.value.Address = rs.address;
					}
					this.address = !!rs ? rs.address : "";
					if (!!rs && !!rs.address) {
						if (!!first) {
							setTimeout(() => {
								//this.zoom = 12;
								//窗口运动过了解决了窗口bm-info-window不显示的BUG
								//这里解决居中BUG,也解决了点击经纬度查询没居中的问题
								var latTemp = parseFloat(parseFloat(this.value.Latitude) + 0.001);
								this.centerPoint = new BMap.Point(this.value.Longitude, latTemp);
							}, 10);
						}
						this.isShowInfo = true;
						var addComp = rs.addressComponents;
						if (this.areaIsNull()) {
							if (!!addComp) {
								this.value.Province = addComp.province;
								this.value.City = addComp.city;
								this.value.District = addComp.district;

								this.setPcd();
							}
						}
						this.pcd = {
							p: addComp.province,
							c: addComp.city,
							d: addComp.district
						};
					} else {
						alert("您选择坐标没有解析到结果!");
					}
				});
			},
			zoomend(e) {
				// const {lng, lat} = e.target.getCenter()
				// this.center.lng = lng
				// this.center.lat = lat
				this.zoom = e.target.getZoom();
			},
			zoomDefault() {
				this.zoom = 13;
				var latTemp = parseFloat(parseFloat(this.value.Latitude) + 0.001);
				this.centerPoint = new BMap.Point(this.value.Longitude, latTemp);
				this.$nextTick(() => {
					this.centerPoint = new BMap.Point(this.value.Longitude, this.value.Latitude);
				});
			},
			useThisAddress() {
				this.value.Address = this.address;
				this.value.Province = this.pcd.p;
				this.value.City = this.pcd.c;
				this.value.District = this.pcd.d;

				this.setPcd();
			},
			clickBaidumap(result) {
				if (!result || !result.point) return;
				this.value.Latitude = parseFloat(result.point.lat);
				this.value.Longitude = parseFloat(result.point.lng);

				this.initMapInfo();
			},
			searchByAddress() {
				var address = this.value.Address;
				var keyword = !!address ? address : "四川省成都市";
				var getCityString = this.value.City;
				if (!getCityString) {
					getCityString = this.value.Province;
					if (!getCityString) getCityString = "四川省";
				}
				let myGeo = new BMap.Geocoder(); //创建地址解析器的实例
				//console.log(keyword);
				myGeo.getPoint(keyword, (point) => {
					if (point) {
						this.clickBaidumap({
							point: point
						});
					} else {
						alert("您选择地址没有解析到结果!");
					}
				}, getCityString);
			},

			searchByL() {
				this.initMapInfo(true);
			},
		}
	}
</script>
